﻿package charts.Elements 
{
	
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import caurina.transitions.Tweener;
	import caurina.transitions.Equations;
	import charts.Pie;
	import flash.display.GradientType;
	
	
	public class PieSliceExt extends Element
	{
		private var TO_RADIANS:Number = Math.PI / 180;
		private var colour:Number;
		public var slice_angle:Number;
		private var border_width:Number;
		private var slice_alpha:Number;
		public var angle:Number;
		public var is_over:Boolean;
		public var nolabels:Boolean;
		private var animate:Boolean;
		public var value:Number;
		private var gradientFill:Boolean;
		private var label:String;
		
		public var position_original:flash.geom.Point;
		public var position_animate_to:flash.geom.Point;
		
		
		public var _extindex:Number;
		public var _extstart:Number;
		public var _exttotal:Number;
		
		public function PieSliceExt( index:Number, style:Object ) 
		{
			this.colour = style.colour;
			this.slice_angle = style.angle;
			this.border_width = 1;
			this.angle = style.start;
			this.slice_alpha = style.alpha;
			this.alpha = style.alpha;
			this.animate = style.animate;
			this.nolabels = style['no-labels'];
			this.value = style.value;
			this.gradientFill = style['gradient-fill'];
			this.label = style.label;
			this.index = index;
			
			
			this._extindex = style["_ext-index"];
			this._extstart = style["_ext-start"];
			this._exttotal = style["_ext-total"];
			this.tooltip = this.replace_magic_values( style.tip );
			
			this.attach_events();
			
			if ( style['on-click'] )
				this.set_on_click( style['on-click'] );
		}
		//
		// for most objects this is handled in Element,
		// and this tip is displayed just above that object,
		// but for PieSlice we want the tooltip to follow
		// the mouse:
		//
		public override function get_tip_pos():Object {
			var p:flash.geom.Point = this.localToGlobal( new flash.geom.Point(this.mouseX, this.mouseY) );
			return {x:p.x,y:p.y};
		}
		
		private function replace_magic_values( t:String ): String {
			
			t = t.replace('#label#', this.label );
			t = t.replace('#val#', NumberUtils.formatNumber( this.value ));
			return t;
		}
		
		public function pie_resize( sc:ScreenCoordsBase, radius:Number): void {
			
			
			this.graphics.clear();
			
			this.x = sc.get_center_x();
			this.y = sc.get_center_y();
			//line from center to edge
			this.graphics.lineStyle( this.border_width, this.colour, 1 );
			
			//if the user selected the charts to be gradient filled do gradients
			if( this.gradientFill )
			{
				//set gradient fill
				var colors:Array = [this.colour, this.colour];// this.colour];
				var alphas:Array = [1, 0.5];
				var ratios:Array = [100,255];
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(radius*2, radius*2, 0, -radius, -radius);
				
				//matrix.createGradientBox(this.stage.stageWidth, this.stage.stageHeight, (3 * Math.PI / 2), -150, 10);
				
				this.graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix);
			}
			else
				this.graphics.beginFill(this.colour, 1);
			
			var endx:Number;
			var endy:Number;
			var ax:Number;
			var ay:Number;
			
			var rectx:Number  = radius * 3 / 2;
			var recty:Number  = -radius;
			var rectw:Number =  radius * 0.3;
			var recth:Number =  radius * 2;
			
			ax = radius*Math.cos((angle)*TO_RADIANS);
			ay = radius * Math.sin((angle) * TO_RADIANS);
			
			//ax = endx+radius*a*Math.cos(((i+angle)-90)*TO_RADIANS);
			//ay = endy+radius*a*Math.sin(((i+angle)-90)*TO_RADIANS);
			//this.graphics.curveTo(ax, ay, endx, endy);

			this.graphics.moveTo(ax, ay);
			this.graphics.lineTo(rectx ,recty+ this._extstart * recth / this._exttotal);
			
			if (this.value + this._extstart == this._exttotal) {
				ax = radius*Math.cos((angle + this.slice_angle)*TO_RADIANS);
				ay = radius * Math.sin((angle + this.slice_angle) * TO_RADIANS);
				this.graphics.moveTo(ax, ay);
				this.graphics.lineTo(rectx ,recty+  recth );
			}
			this.graphics.drawRect(rectx , recty + this._extstart * recth / this._exttotal,rectw,recth * this.value / this._exttotal);
			
			//this.graphics.drawRect(rectx + rect, recty, rectw, recth);
			
			/*if( this.animate )
			{
				if ( this.rotation != this.angle )	// <-- have we already rotated this slice?
					Tweener.addTween(this, { rotation:this.angle, time:1.4, transition:Equations.easeOutCirc } );
			}
			else
			{
				this.rotation = this.angle;
			}
			*/
		}
		public override function mouseOver(event:Event):void {
			
			Tweener.addTween(this, { alpha:1, time:0.6, transition:Equations.easeOutCirc } );
			this.is_over = true;
			
			this.dispatchEvent( new ShowTipEvent( this.slice_angle ) );
			
		}

		public override function mouseOut(event:Event):void {
			Tweener.addTween(this, { alpha:slice_alpha, time:0.8, transition:Equations.easeOutElastic } );
			this.is_over = false;
		}
	}
	
}